<template>
  <div class="ui-toolbar" :class="classes">
    <div class="ui-toolbar__left">
      <div class="ui-toolbar__nav-icon" v-if="!removeNavIcon">
        <slot name="icon">
          <ui-icon-button
            size="large"
            type="secondary"

            :color="textColor"
            :icon="navIcon"

            @click="navIconClick"
          ></ui-icon-button>
        </slot>
      </div>

      <div class="ui-toolbar__brand" v-if="brand || $slots.brand">
        <slot name="brand">
          <div class="ui-toolbar__brand-text">{{ brand }}</div>
        </slot>
      </div>
    </div>

    <div class="ui-toolbar__body" :class="{ 'has-brand-divider': hasBrandDivider }">
      <slot>
        <div class="ui-toolbar__title" v-if="title">{{ title }}</div>
      </slot>
    </div>

    <div class="ui-toolbar__right">
      <slot name="actions"></slot>
    </div>

    <ui-progress-linear
      class="ui-toolbar__progress"
      :color="progressColor"
      v-show="loading"
    ></ui-progress-linear>
  </div>
</template>

<script>
import UiIconButton from './UiIconButton.vue'
import UiProgressLinear from './UiProgressLinear.vue'

export default {
  name: 'ui-toolbar',

  props: {
    type: {
      type: String,
      default: 'default' // 'default', 'colored' or 'clear' - colored is brand primary color
    },
    textColor: {
      type: String,
      default: 'black' // 'black' or 'white'
    },
    title: String,
    brand: String,
    removeBrandDivider: {
      type: Boolean,
      default: false
    },
    navIcon: {
      type: String,
      default: 'menu'
    },
    removeNavIcon: {
      type: Boolean,
      default: false
    },
    raised: {
      type: Boolean,
      default: true
    },
    progressPosition: {
      type: String,
      default: 'bottom' // 'top' or 'bottom'
    },
    loading: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    classes () {
      return [
        `ui-toolbar--type-${this.type}`,
        `ui-toolbar--text-color-${this.textColor}`,
        `ui-toolbar--progress-position-${this.progressPosition}`,
        { 'is-raised': this.raised }
      ]
    },

    progressColor () {
      return (this.textColor === 'black') ? 'primary' : 'white'
    },

    hasBrandDivider () {
      return this.removeBrandDivider ? false : (this.brand || this.$slots.brand)
    }
  },

  methods: {
    navIconClick () {
      this.$emit('nav-icon-click')
    }
  },

  components: {
    UiIconButton,
    UiProgressLinear
  }
}
</script>

<style lang="scss">
@import './styles/imports';

$ui-toolbar-font-size   : rem-calc(18px) !default;
$ui-toolbar-height      : rem-calc(56px) !default;

.ui-toolbar {
  align-items: center;
  display: flex;
  font-family: $font-stack;
  font-size: $ui-toolbar-font-size;
  height: $ui-toolbar-height;
  padding-left: rem-calc(16px);
  position: relative;

  &.is-raised {
    box-shadow: 0 0 2px rgba(black, 0.12), 0 2px 2px rgba(black, 0.2);
  }

  &:not(.is-raised).ui-toolbar--type-default {
    border-bottom: rem-calc(1px) solid $divider-color;
  }

  .ui-icon-button {
    height: rem-calc(48px);
    width: rem-calc(48px);
  }
}

.ui-toolbar__left {
  align-items: center;
  display: flex;
  flex-shrink: 0;
}

.ui-toolbar__nav-icon {
  margin-left: rem-calc(-16px);
  margin-right: rem-calc(8px);
}

.ui-toolbar__brand {
  min-width: rem-calc(160px);
}

.ui-toolbar__brand-text {
  flex-grow: 1;
  padding-right: rem-calc(8px);
}

.ui-toolbar__body {
  display: flex;
  flex-grow: 1;

  &.has-brand-divider {
    border-left-style: solid;
    border-left-width: rem-calc(1px);
    padding-left: rem-calc(24px);
  }
}

.ui-toolbar__right {
  flex-shrink: 0;
  margin-left: auto;
}

.ui-toolbar__progress {
  bottom: 0;
  height: rem-calc(3px);
  left: 0;
  position: absolute;
  right: 0;
}

// ================================================
// Types
// ================================================

.ui-toolbar--type-default {
  background-color: white;
}

.ui-toolbar--type-colored {
  background-color: $brand-primary-color;
}

.ui-toolbar--type-clear {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

// ================================================
// Text colors
// ================================================

.ui-toolbar--text-color-black {
  color: $primary-text-color;

  .ui-toolbar__body {
    border-left-color: rgba(black, 0.15);
  }
}

.ui-toolbar--text-color-white {
  color: white;

  .ui-toolbar__body {
    border-color: rgba(white, 0.4);
  }
}

// ================================================
// Progress positions
// ================================================

.ui-toolbar--progress-position-top {
  .ui-toolbar__progress {
    top: 0;
  }
}
</style>
